<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

	<h:form id="form_main_top">
		<p:contextMenu for="data_table">
			<p:menuitem value="#{msg['wallet.app.button.addNew']}"
				process="@this" icon="ui-icon-plus"
				oncomplete="document.getElementById('form_action:btnAdd').click();" />

			<p:menuitem value="#{msg['wallet.app.button.update']}"
				process="@this" update=":form_action" icon="ui-icon-search"
				oncomplete="document.getElementById('form_action:btnUpdate').click();" />

			<p:menuitem value="#{msg['wallet.app.button.delete']}"
				process="@this" update=":form_action" icon="ui-icon-close"
				oncomplete="document.getElementById('form_action:btnDelete').click();" />
		</p:contextMenu>

		<p:dataTable id="data_table" var="budget"
			value="#{budgetBean.lazyModel}" lazy="true" paginator="true"
			paginatorAlwaysVisible="false" rows="5"
			paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
			paginatorPosition="bottom" selectionMode="multiple"
			selection="#{budgetBean.selectedRows}" rowKey="#{budget.id}"
			rowStyleClass="#{budget.status eq true ? 'disabled' : null}"
			emptyMessage="#{msg['wallet.app.budget.budgetTable.noBudgetFound']}"
			sortBy="#{budget.id}" sortOrder="descending" tableStyle="width:50%;">

			<f:facet name="header">Buget list</f:facet>

			<p:ajax event="contextMenu" update=":form_action" />
			<p:ajax event="rowSelect" update=":form_action" />
			<p:ajax event="rowUnselect" update=":form_action" />
			<p:ajax event="rowDblselect" update=":form_action"
				oncomplete="document.getElementById('form_action:btnUpdate').click();" />

			<p:column headerText="ID" sortBy="#{budget.id}">
				<h:outputText value="#{budget.id}" />
			</p:column>

			<p:column headerText="Name" filterBy="#{budget.name}"
				sortBy="#{budget.name}">
				<h:outputText value="#{budget.name}" />
			</p:column>

			<p:column headerText="Description" filterBy="#{budget.description}">
				<h:outputText value="#{budget.description}" />
			</p:column>

			<p:column headerText="Projected" filterBy="#{budget.projected}"
				sortBy="#{budget.projected}"
				rendered="#{budgetBean.projectedEnabled}">
				<h:outputText value="#{budget.projected}" />
			</p:column>

			<p:column headerText="Actual" filterBy="#{budget.actual}"
				sortBy="#{budget.actual}">
				<h:outputText value="#{budget.actual}" />
			</p:column>

			<p:column headerText="Status" filterBy="#{budget.status}"
				filterOptions="#{budgetBean.booleanStatusOption}"
				filterMatchMode="exact">
				<p:selectBooleanCheckbox disabled="true" value="#{budget.status}" />
			</p:column>
		</p:dataTable>
	</h:form>

	<h:form id="form_action">
		<h:panelGrid id="budget_action" columns="3">
			<p:commandButton actionListener="#{budgetBean.prepareItem(0)}"
				value="#{msg['wallet.app.button.addNew']}" id="btnAdd"
				process="@this" update=":form_update"
				oncomplete="newBudgetDialogVar.show();" />

			<p:commandButton actionListener="#{budgetBean.prepareItem(1)}"
				value="#{msg['wallet.app.button.update']}" id="btnUpdate"
				process="@this" update=":form_update"
				disabled="#{fn:length(budgetBean.selectedRows) lt 1}"
				oncomplete="newBudgetDialogVar.show();" />

			<p:commandButton value="#{msg['wallet.app.button.delete']}"
				id="btnDelete" process="@this"
				disabled="#{fn:length(budgetBean.selectedRows) lt 1}"
				oncomplete="confirmDialogVar.show()" />
		</h:panelGrid>

	</h:form>

	<p:dialog id="newBudgetDialog" widgetVar="newBudgetDialogVar"
		draggable="false" resizable="false" closable="false"
		header="dialog header" modal="true" appendToBody="true">

		<h:form id="form_update">
			<p:messages autoUpdate="true" />
			<p:panelGrid>
				<p:row rendered="#{budgetBean.updateMultitple eq 'false'}">
					<p:column>
						<h:outputLabel for="name"
							value="#{msg['wallet.app.budget.dialog.form.name']}" />
					</p:column>
					<p:column>
						<p:inputText id="name" value="#{budgetBean.customBudget.name}"
							required="true" requiredMessage="Budget name is required" />
					</p:column>
				</p:row>
				<p:row rendered="#{budgetBean.updateMultitple eq 'false'}">
					<p:column>
						<h:outputLabel for="desc"
							value="#{msg['wallet.app.budget.dialog.form.desc']}" />
					</p:column>
					<p:column>
						<p:inputText id="desc"
							value="#{budgetBean.customBudget.description}" />
					</p:column>
				</p:row>
				<p:row rendered="#{budgetBean.updateMultitple eq 'false'}">
					<p:column>
						<h:outputLabel for="projected"
							value="#{msg['wallet.app.budget.dialog.form.projected']}" />
					</p:column>
					<p:column>
						<p:inputText id="projected"
							value="#{budgetBean.customBudget.projected}" />
					</p:column>
				</p:row>
				<p:row rendered="#{budgetBean.updateMultitple eq 'false'}">
					<p:column>
						<h:outputLabel for="actual"
							value="#{msg['wallet.app.budget.dialog.form.actual']}" />
					</p:column>
					<p:column>
						<p:inputText id="actual" value="#{budgetBean.customBudget.actual}"
							required="true" requiredMessage="Budget amount must be filled" />
					</p:column>
				</p:row>
				<p:row rendered="#{budgetBean.updateMultitple eq 'false'}">
					<p:column>
						<h:outputLabel for="status"
							value="#{msg['wallet.app.budget.dialog.form.status']}" />
					</p:column>
					<p:column>
						<p:selectBooleanButton id="status"
							value="#{budgetBean.customBudget.status}"
							onLabel="#{msg['wallet.app.option.ACTIVE']}"
							offLabel="#{msg['wallet.app.option.DISABLED']}"
							onIcon="ui-icon-check" offIcon="ui-icon-close" />
					</p:column>
				</p:row>

				<p:row rendered="#{budgetBean.updateMultitple eq 'true'}">
					<p:column>
						<h:outputLabel for="m_status"
							value="#{msg['wallet.app.budget.dialog.form.status']}" />
					</p:column>
					<p:column>
						<p:selectOneMenu id="m_status" value="#{budgetBean.isDisabledAll}">
							<f:selectItem itemValue="-1"
								itemLabel="#{msg['wallet.app.option.NotUpdate']}" />
							<f:selectItem itemValue="1"
								itemLabel="#{msg['wallet.app.option.ACTIVE']}" />
							<f:selectItem itemValue="0"
								itemLabel="#{msg['wallet.app.option.DISABLED']}" />
						</p:selectOneMenu>
					</p:column>
				</p:row>

				<p:row>
					<p:column>
						<h:outputLabel for="s_beginOn"
							value="#{msg['wallet.app.scheduler.repeat.startDate']}" />
					</p:column>
					<p:column>
						<p:calendar id="s_beginOn"
							value="#{budgetBean.customBudget.scheduler.beginOn}"
							pattern="dd/MM/yyyy" require="true"
							requiredMessage="Scheduler start date must be chosen">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</p:calendar>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel for="s_finishOn"
							value="#{msg['wallet.app.scheduler.repeat.endDate']}" />
					</p:column>
					<p:column>
						<p:calendar id="s_finishOn"
							value="#{budgetBean.customBudget.scheduler.finishOn}"
							pattern="dd/MM/yyyy" require="true"
							requiredMessage="Scheduler end date must be chosen">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</p:calendar>
					</p:column>
				</p:row>
				<p:row rendered="#{budgetBean.updateMultitple eq 'false'}">
					<p:column>
						<h:outputLabel for="s_repeat"
							value="#{msg['wallet.app.scheduler.repeat.title']}" />
					</p:column>
					<p:column>
						<p:selectOneMenu id="s_repeat"
							value="#{budgetBean.customBudget.scheduler.type}">
							<f:selectItem itemValue="0"
								itemLabel="#{msg['wallet.app.scheduler.repeat.option.once']}" />
							<f:selectItem itemValue="1"
								itemLabel="#{msg['wallet.app.scheduler.repeat.option.daily']}" />
							<f:selectItem itemValue="2"
								itemLabel="#{msg['wallet.app.scheduler.repeat.option.weekly']}" />
							<f:selectItem itemValue="3"
								itemLabel="#{msg['wallet.app.scheduler.repeat.option.monthly']}" />
						</p:selectOneMenu>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<p:commandButton action="#{budgetBean.storeItem()}"
							process=":form_update" update=":log_message"
							value="#{msg['wallet.app.button.save']}" icon="ui-icon-check"
							style="margin:0"
							oncomplete="handleUpdateBudget(xhr, status, args)" />
					</p:column>
					<p:column>
						<p:commandButton value="#{msg['wallet.app.button.cancel']}"
							onclick="newBudgetDialogVar.hide();" icon="ui-icon-cancel"
							style="margin:0" />
					</p:column>
				</p:row>
			</p:panelGrid>
		</h:form>
		<script>
					function handleUpdateBudget(xhr, status, args){
						if(!args.validationFailed){
							newBudgetDialogVar.hide();
						}
					}
				</script>
	</p:dialog>

	<p:confirmDialog id="confirmDialog" widgetVar="confirmDialogVar"
		severity="alert"
		message="#{msg['wallet.app.budget.dialog.confirmDeleteMessage']}"
		header="#{msg['wallet.app.budget.dialog.confirmDeleteHeader']}"
		closable="false" appendToBody="true">
		<h:form>
			<p:commandButton id="confirm"
				actionListener="#{budgetBean.deleteItem()}" value="Yes"
				process="@this" update=":form_main_top :log_message"
				oncomplete="confirmDialogVar.hide()" />

			<p:commandButton id="decline" value="Not Yet"
				onclick="confirmDialogVar.hide()" type="button" />
		</h:form>
	</p:confirmDialog>

	<h:form prependId="false">
		<p:commandButton id="btnRefreshBudgetOverviewChart"
			value="Refresh budgets"
			action="#{budgetBean.refreshBudgetOverviewChart()}"
			update="budget_chart" rendered="true" />

		<p:pieChart id="budget_chart"
			value="#{budgetBean.budget_overview_model}" legendPosition="e"
			showDataLabels="true" title="Budget Overview" sliceMargin="10"
			style="width:400px;height:300px">

			<p:ajax event="itemSelect"
				listener="#{budgetBean.refreshBudgetDetailsChart}"
				update="budget_details" />
		</p:pieChart>

		<h:outputText value="No budget found"
			rendered="#{fn:length(budgetBean.bkBudgetTable) eq 0}" />

		<p:pieChart id="budget_details"
			value="#{budgetBean.budget_details_chart}" legendPosition="e"
			showDataLabels="true" title="Budget details" sliceMargin="10"
			style="width:400px;height:300px"
			rendered="#{budgetBean.showBudgetDetails eq 'true'}" />

		<h:outputText value="No transaction found"
			rendered="#{budgetBean.showBudgetDetails eq 'false'}" />
	</h:form>
	<script>
		function changeDialogHeader(title){
			newBudgetDialogVar.titlebar.children('span.ui-dialog-title').html(title);
		}
		
		jQuery(document).ready(function(){
			//load budget overview chart by default
			document.getElementById("btnRefreshBudgetOverviewChart").click();
		});
	</script>
</ui:composition>